<template>
  <div class="">
    <button @click="handleChange">change</button>
    <slot name="kiss"></slot>
    <br>
    <input type="text" v-model="people.name">
    <input type="text" v-model="people.job">
    <br>
    <div>
      <input type="text" v-model="fullName"> --- {{ people.fullNameAbb}}
    </div>
  </div>
</template>

<script>
import { ref, reactive, computed } from 'vue'
export default {
  name: 'home',
  // beforeCreate() {
  //   console.log('beforeCreate')
  // },
  props: {
    msg: {
      type: String,
      default: String
    }
  },
  emits: ['changeMsg'],
  setup(props, context) {
    const people = reactive({
      name: 'jack',
      age: 18,
      job: 'teach'
    })
    function handleChange() {
      context.emit('changeMsg', 'test')
    }
    const fullName = computed({
      get() {
        return people.name + '-' + people.job
      },
      set(val) {
        const attrName = val.split('-')
        people.name = attrName[0]
        people.job = attrName[1]
      }
    })
    // 简写形式，没有考虑计算属性被修改的情况
    people.fullNameAbb = computed(() => {
      return people.name + '-' + people.job
    })
    // console.log(props, context, this)
    // console.log(context.slots)
    return {
      people,
      handleChange,
      fullName
    }
  }
}
</script>

<style lang="" scoped>

</style>
